<template>
	<view class="content">
		<view class="top">
			<view class="index-button">
				<view class="icon iconfont icon-1804-liufupinggongnengtubiao_huaban1fuben23"></view>
			</view>
			<view class="top-bar">
				<view class="nav-item" :class="{'actived':currentType==typeItem.typeId}" :key="typeItem.typeId"
					v-for="(typeItem,index) in typeList" @click="typeClick(typeItem)">
					{{typeItem.name}}
				</view>
			</view>
			<!-- <view class="index-button">
				<view class="icon iconfont icon-icon_search"></view>
			</view> -->
		</view>
		<view class="images-wall">
			<view class="flow wall-left">
				<view class="image-item" v-for="(contentInfo,index) in contentList" :key="contentInfo.movieId"
				v-if="index%2==0">
					<image :src="contentInfo.img" mode="widthFix" class="image"
						@click="contentClick(contentInfo)"></image>
					<view class="title">{{contentInfo.name}}</view>
					<view class="author-bar">
						<view class="author-info">
							<view class="author">{{contentInfo.directorName}}</view>
						</view>
						<view class="praise-count">
							<view class="number">
								{{contentInfo.rating>0?(parseFloat(contentInfo.rating)).toFixed(1)+"分":"无评分"}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flow wall-right">
				<view class="image-item" v-for="(contentInfo,index) in contentList" :key="contentInfo.movieId"
				v-if="index%2>0">
					<image :src="contentInfo.img" mode="widthFix" class="image"
						@click="contentClick(contentInfo)"></image>
					<view class="title">{{contentInfo.name}}</view>
					<view class="author-bar">
						<view class="author-info">
							<view class="author">{{contentInfo.directorName}}</view>
						</view>
						<view class="praise-count">
							<view class="number">
								{{contentInfo.rating>0?(parseFloat(contentInfo.rating)).toFixed(1)+"分":"无评分"}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//分类数据数组
				typeList: [],
				//记录被激活的分类
				currentType: 0,
				
				//影片列表
				contentList: [],
				//页长
				pageSize:10,
				//页码
				pageNum:0,
				
				
				//请求锁：避免重复请求
				requestLock:false,
				//是否到达最后一页
				isLast:false
			}
		},
		
		methods: {
			//获取分类数据
			loadTypes(){
				uni.request({
					url:"http://118.25.42.197:9930/api/movies/categories",
					success:(response)=>{
						console.log("获取全部分类数据响应结果：",response);
						if(response.statusCode==200){
							this.typeList=response.data;
							//将currentType指定为第一个元素id
							if(this.typeList && this.typeList.length>0){
								this.currentType=this.typeList[0].typeId;
								this.loadContent();
							}
						}
					}
				});
			},
			//加载影片数据
			loadContent(){
				var params={
					pageNum:this.pageNum,
					pageSize:this.pageSize,
					categories:this.currentType
				}
				uni.showLoading({
					title:'加载中'
				});
				this.requestLock=true;
				uni.request({
					url:"http://118.25.42.197:9930/api/movies/movie-list",
					data:params,
					success:(response)=>{
						console.log("获取影片列表响应结果：",response);
						if(response.statusCode==200){
							//记录是否最后一页
							this.isLast=response.data.last;
							if(this.pageNum==0){
								this.contentList=response.data.content;
							}else{
								this.contentList=this.contentList.concat(response.data.content);
							}
							
						}
					},
					complete:()=>{
						uni.hideLoading();
						uni.stopPullDownRefresh();
						this.requestLock=false;
					}
					
				});
			},
			typeClick(typeItem) {
				this.currentType=typeItem.typeId;
				this.pageNum=0;
				uni.pageScrollTo({
					scrollTop:0
				})
				this.loadContent();
			},
			
			contentClick(contentInfo) {
				
			}
		},
		onLoad() {
			this.loadTypes();
		},
		onPullDownRefresh(){
			console.log("下拉刷新生命周期")
			this.loadContent();
		},
		onReachBottom(){
			
			if(this.requestLock)return;
			if(this.isLast)return;
			console.log("滚动到了底部,请求下一页数据");
			this.pageNum+=1;
			this.loadContent();
		}
	}
</script>

<style>
	.content {
		padding-top: 80px;
		padding-bottom: 50px;
		background-color: #efefef;
	}

	.top {
		width: 750rpx;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: #fff;
	}

	.top-bar {
		flex: 1;
		overflow-x: scroll;
		display: flex;
		flex-wrap: nowrap;
		padding: 20rpx 10rpx;
		align-items: center;
		justify-content: start;
		position: relative;
	}

	.index-button {
		flex-shrink: 0;
		width: 80rpx;
	}

	.index-button .icon {
		font-size: 46px;
		color: #fce71c;
	}

	.index-button .icon-icon_search {
		color: #7A7E83;
		font-size: 30px;
	}

	.top-bar .nav-item {
		margin-right: 50rpx;
		flex-shrink: 0;
		font-size: 100%;
		color: #a2a2a2;
		padding: 15rpx 5rpx;
	}

	.top-bar .nav-item.actived {
		color: #000000;
		font-size: 105%;
		text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3);
		border-bottom: 2px solid #efefef;
	}

	.images-wall {
		display: flex;
		width: 750rpx;
		justify-content: space-between;
		align-items: flex-start;
		background: #ebebeb;
		min-height: 100vh;
		flex-wrap: wrap;
	}

	.images-wall .image-item {
		width: 363rpx;
		flex-shrink: 0;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #fff;
		margin-top: 20rpx;
		margin-left: 7rpx;
		margin-right: 7rpx;
	}

	.images-wall .image-item .image {
		width: 100%;
		min-height: 60px;
		border-radius: 5px 5px 0 0;
	}

	.images-wall .image-item .title {
		padding: 5rpx 10rpx;
	}

	.images-wall .image-item .author-bar {
		padding: 5rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.images-wall .image-item .author-bar .author {
		color: #686868;
		font-size: 70%;
		margin-left: 20rpx;
	}

	.images-wall .image-item .author-bar .author-info {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.images-wall .image-item .author-bar .author-info .avartar {
		width: 50rpx;
		height: 50rpx;
	}

	.images-wall .image-item .author-bar .author-info .avartar image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.images-wall .image-item .author-bar .praise-count {
		display: flex;
		align-items: center;
		color: #686868;
	}

	.images-wall .image-item .author-bar .praise-count .number {
		margin-left: 10rpx;
		font-size: 90%;
	}
</style>
